<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
import { getSumList } from '@/api/dashboard'
const echarts = require('echarts/lib/echarts')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/grid')
require('echarts/lib/component/legend')
require('echarts/lib/chart/bar')

export default {
  props: {
    select: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      echartsData: {}
    }
  },
  watch: {
    select (newVal, oldVal) {
      this.setEcharts()
    }
  },
  created () {
    this.setEcharts()
  },
  methods: {
    async setEcharts () {
      await this.getSumList()
      const chart = echarts.init(this.$refs.myDiv)
      chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          bottom: '0px'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.echartsData.x
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        series: [
          {
            name: this.echartsData?.data[0].name,
            type: 'bar',
            data: this.echartsData?.data[0].data
          },
          {
            name: this.echartsData?.data[1].name,
            type: 'bar',
            data: this.echartsData?.data[1].data
          }
        ]
      }
      )
    },
    async getSumList () {
      const dimension = this.select === 0 ? 'w' : this.select === 1 ? 'e' : 'c'
      const { data } = await getSumList({ dimension })
      this.echartsData = data
    }
  },
  async mounted () {
  }
}
</script>

<style scoped>
.radar-echart {
  width: 1567px;
  height: 430px;
}
</style>
